import { IThemeColor } from '../../../../type/index';

export const initWorkRate = (echarts: any, dom: HTMLElement, workStuNum: number, totalStuNum: number, themeColor: IThemeColor) => {
  const dataRate = workStuNum / totalStuNum;

  const charts = echarts.init(dom);
  charts.setOption({
    title: {
      text: '就业率统计',
      textStyle: {
        color: themeColor.font,
        fontSize: 16,
        fontWeight: 'normal',
      },
      padding: [16, 0, 0, 16],
    },
    angleAxis: {
      polarIndex: 0,
      min: 0,
      max: 100,
      show: false,
      // startAngle:90,
      clockwise: false, //逆时针
    },
    radiusAxis: {
      type: 'category',
      // min: 10,
      // max: 10,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: {
      center: ['50%', '50%'], //中心点位置
      radius: '150%', //外圆环的大小
    },
    series: [
      {
        type: 'liquidFill',
        radius: '60%',
        center: ['50%', '50%'],
        data: [dataRate, dataRate / 1.1, dataRate / 1.2], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'transparent',
        },
        label: {
          formatter: [`{a|${workStuNum}}{b| 人}{c| /}{b| ${totalStuNum}人}`, `{c|就业率   ${(dataRate * 100).toFixed(2)}%}`].join('\n'),
          rich: {
            a: {
              fontSize: 34,
              fontFamily: 'DS',
              color: '#03F0FF',
            },
            b: {
              fontSize: 14,
              color: '#B7C9E3',
            },
            c: {
              fontSize: 16,
              color: '#fff',
              height: 30,
            },
          },
        },
        outline: {
          show: false,
        },
      },
      {
        type: 'bar',
        z: 10,
        name: '外环',
        data: [dataRate * 100],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 25,
        itemStyle: {
          color: {
            // 完成的圆环的颜色
            colorStops: [
              {
                offset: 0,
                color: '#A098FC', // 0% 处的颜色
              },
              {
                offset: 0.3,
                color: '#4386FA', // 30% 处的颜色
              },
              {
                offset: 0.6,
                color: '#4FADFD', // 60% 处的颜色
              },
              {
                offset: 0.8,
                color: '#0CD3DB', // 80% 处的颜色
              },
              {
                offset: 1,
                color: '#646CF9', // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  });
};
